<template>
    <div class="legend">
        <div class="point">
            图例:
            <span class="tips"></span> 离线&nbsp;&nbsp;&nbsp;
            <span class="tips"></span> {{$route.path == '/iot_alarm'?'正常':'在线'}}&nbsp;&nbsp;&nbsp;
            <span class="tips"></span> 报警&nbsp;&nbsp;&nbsp;
        </div>
    </div>
</template>

<script>
export default {
    methods:{
        legend(){
            let path = this.$route.path;
            let className = ''
            if(path == '/iot_device_point'){//绑点
                className = 'bind'
            }else if(path == '/iot_card'){//一卡通
                className = 'door'
            }else if(path == '/iot_parking'){//停车场
                className = 'parking'
            }else if(path == '/iot_video_monitor'){//视频监控
                className = 'camera'
            }else if(path == '/iot_alarm'){//安防报警
                className = 'alarm'
            }else if(path == '/iot_fire_monitor'){//火灾
                className = 'fire'
            }
            let dom = document.querySelectorAll('.tips');
            for(let i = 0; i < dom.length; i++){
                dom[i].className = className
            }
        }
    },
    updated(){
        this.legend();
    },
    mounted(){
        this.legend();
        if(this.$route.path == '/iot_alarm'){
            let str = document.querySelector('.point');
            console.log(str);
            str.innerHTML = str.innerHTML.replace('离线','')
        }
    }
};
</script>

<style scoped>
.camera:nth-child(1) { 
    background: url('../../assets/images/bind_icon/camera0.svg') no-repeat;
}
.camera:nth-child(2) {
    background: url('../../assets/images/bind_icon/camera1.svg') no-repeat;
}
.camera:nth-child(3) {
    background: url('../../assets/images/bind_icon/camera2.svg') no-repeat;
}
.fire:nth-child(1) {
    background: url('../../assets/images/bind_icon/fire0.svg') no-repeat;
}
.fire:nth-child(2) {
    background: url('../../assets/images/bind_icon/fire1.svg') no-repeat;
}
.fire:nth-child(3) {
    background: url('../../assets/images/bind_icon/fire2.svg') no-repeat;
}
.alarm:nth-child(1) {
    background: url('../../assets/images/bind_icon/alarm2.svg') no-repeat;
    display: none;
}
.alarm:nth-child(2) {
    background: url('../../assets/images/bind_icon/alarm1.svg') no-repeat;
}
.alarm:nth-child(3) {
    background: url('../../assets/images/bind_icon/alarm0.svg') no-repeat;
}
.door:nth-child(1) {
    background: url('../../assets/images/bind_icon/door_close_off.svg') no-repeat;
}
.door:nth-child(2) {
    background: url('../../assets/images/bind_icon/door_close_on.svg') no-repeat;
}
.door:nth-child(3) {
    background: url('../../assets/images/bind_icon/door_warn.svg') no-repeat;
}
.parking:nth-child(1) {
    background: url('../../assets/images/bind_icon/parking0.svg') no-repeat;
}
.parking:nth-child(2) {
    background: url('../../assets/images/bind_icon/parking1.svg') no-repeat;
}
.parking:nth-child(3) {
    background: url('../../assets/images/bind_icon/parking2.svg') no-repeat;
}
.bind:nth-child(1) {
    background: url('../../assets/images/bind_icon/offline.svg') no-repeat;
}
.bind:nth-child(2) {
    background: url('../../assets/images/bind_icon/online.svg') no-repeat;
}
.bind:nth-child(3) {
    background: url('../../assets/images/bind_icon/warning.svg') no-repeat;
}
.legend {
    font-size: 16px;
    display: flex;
}
.point {
    flex: 3;
    /* font-size: 16px; */
}
.statusIcon,.point>span {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    border-radius: 50%;
}
.statusIcon:nth-child(1) {
    background: #1f807f;
}
.statusIcon:nth-child(2) {
    background: #f70000;
}
.statusIcon:nth-child(3) {
    background: #c3c3c3;
}
</style>